<template>
	<view>
		<view class="p-20px pb-120px">
			<uv-sticky offset-top="10">
				<uv-subsection :list="state.tabs" :current="state.current" @change="change"
					custom-style="height: 60rpx;border-radius: 30rpx;" custom-item-style="border-radius: 30rpx;">
				</uv-subsection>
			</uv-sticky>

			<view>
				<BigCountNum title='您当前推荐人数' count='256'></BigCountNum>

				<view v-if="state.cardList && state.cardList.length">
					<view class="p-20px mb-20px bg-white rounded-20px" v-for="(item,index) in state.cardList"
						:key="index">
						<view class="flex">
							<view class="mr-20px flex flex-y flex-y-center flex-x-center">
								<uv-avatar :src="item.src" :size="40"></uv-avatar>
								<view class="my-10px flex flex-y flex-x-between flex-y-center">
									<text class="mr-10px mb-10px text-28px">{{item.nickName}}</text>
									<uv-tags v-if="state.current===0" text="已支付" type="success" shape="circle"
										size="mini"></uv-tags>
									<uv-tags v-else text="未支付" type="warning" shape="circle" size="mini"></uv-tags>
								</view>
							</view>
							<view class="flex-1 text-24px leading-45px">
								<view class="w-1-2 flex">
									<view class="w-120px">归属员工：</view> <text>{{item.employee}}</text>
								</view>
								<view class="w-1-2 flex">
									<view class="w-120px">推荐人：</view><text>{{item.presenter}}</text>
								</view>
								<view class="w-1-2 flex">
									<view class="w-120px">姓名：</view><text>{{item.userName}}</text>
								</view>
								<view class="w-1-2 flex">
									<view class="w-120px">手机号：</view><text>{{item.phone}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>

			</view>
		</view>

		<BackWorkSpace></BackWorkSpace>
	</view>
</template>

<script setup name="RecommendedDataInfo">
	import {
		reactive,
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import BigCountNum from '@/components/BigCountNum.vue'

	const state = reactive({
		tabs: ['已支付推荐', '未支付推荐'],
		// 或者如下，也可以配置keyName参数修改对象键名
		// tabs: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
		current: 0,
		pageType: 0,
		search: '',
		cardList: [{
				id: 0,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				nickName: '肖诗雨',
				employee: '刘老师',
				presenter: '杨绛',
				userName: '王阳明',
				phone: '13355523434'
			},
			{
				id: 1,
				src: 'https://via.placeholder.com/200x200.png/2878ff',
				nickName: '李雨晴',
				employee: '王老师',
				presenter: '杨绛',
				userName: '王阳明',
				phone: '13355523434'
			},
		]
	})

	const change = (index) => {
		state.current = index
		if (state.pageType == 0) {
			if (state.current == 0) {
				console.log('切换 全部组队 已支付推荐 接口');
			} else if (state.current == 1) {
				state.cardList = []
				console.log('切换 全部组队 未支付推荐 接口');
			}
		}

		if (state.pageType == 1) {
			if (state.current == 0) {
				console.log('切换 推荐数据 已支付推荐 接口');
			} else if (state.current == 1) {
				state.cardList = []
				console.log('切换 推荐数据 未支付推荐 接口');
			}
		}
	}

	// const setTitle = () => {
	// 	if (state.pageType == 0) {
	// 		uni.setNavigationBarTitle({
	// 			title: '订单列表'
	// 		});
	// 		console.log('onmount 全部组队 已支付推荐 接口');
	// 	} else if (state.pageType == 1) {
	// 		uni.setNavigationBarTitle({
	// 			title: '订单列表'
	// 		});
	// 		console.log('onmount 推荐数据 已支付推荐 接口');
	// 	}
	// }

	onLoad((option) => {
		const currentTab = option.currentTab
		state.current = currentTab
		state.pageType = option.pageType
		console.log(888, state);
		change(currentTab)
	})
</script>

<style lang="scss">
	page {
		background: rgb(61, 114, 255);
	}
</style>